﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - SpreadJS with the Wijmo DataView</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - SpreadJS with the Wijmo DataView"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n0","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="You can use the Wijmo DataView source (which implements the IDataView interface) to implement paging, filtering, and sorting functions." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="d3ab1a06-01e4-41c1-986e-382eaf51b893"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->SpreadJS with the Wijmo DataView<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>You can use the Wijmo <strong>DataView</strong> source (which implements the <strong>IDataView</strong> interface) to implement paging, filtering, and sorting functions.</p>

<p>Use the following steps to use the <strong>DataView</strong> source with&nbsp;SpreadJS.</p>

<p>1. Add the js reference.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!--JS Reference--&gt;<br />
                &nbsp;....<br />
                &nbsp;&lt;script type="text/javascript" src="../XXX/globalize.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&lt;script type="text/javascript" src="../XXX/knockout-2.1.0.js"&gt;&lt;/script&gt;<br />
                &nbsp;&lt;script type="text/javascript" src="../XXX/knockout-2.1.0.js"&gt;&lt;/script&gt;<br />
                &nbsp;&lt;script type="text/javascript" src="../XXX/gc.spread.sheets.all.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;....</td>
            </tr>
        </tbody>
    </table>
</div>

<p>2. Define the view mode and implement the <strong>IDataView</strong> interface.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">var viewModel;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function sourceData() {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return [<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { "Product_ID": 1, "Supplier_ID": 1, "Category_ID": 1, "Product_Name": "Chai", "English_Name": "Dharamsala Tea", "Quantity_Per_Unit": "10 boxes x 20 bags", "Unit_Price": 18.0, "Units_In_Stock": 39, "Units_On_Order": 0, "Reorder_Level": 10, "Discontinued": false }, { "Product_ID": 2, "Supplier_ID": 1, "Category_ID": 1, "Product_Name": "Chang", "English_Name": "Tibetan Barley Beer", "Quantity_Per_Unit": "24 - 12 oz bottles", "Unit_Price": 19.0, "Units_In_Stock": 17, "Units_On_Order": 40, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 24, "Supplier_ID": 10, "Category_ID": 1, "Product_Name": "Guaraná Fantástica", "English_Name": "Guaraná Fantástica Soft Drink", "Quantity_Per_Unit": "12 - 355 ml cans", "Unit_Price": 4.5, "Units_In_Stock": 20, "Units_On_Order": 0, "Reorder_Level": 0, "Discontinued": true }, { "Product_ID": 34, "Supplier_ID": 16, "Category_ID": 1, "Product_Name": "Sasquatch Ale", "English_Name": "Sasquatch Ale", "Quantity_Per_Unit": "24 - 12 oz bottles", "Unit_Price": 14.0, "Units_In_Stock": 111, "Units_On_Order": 0, "Reorder_Level": 15, "Discontinued": false }, { "Product_ID": 35, "Supplier_ID": 16, "Category_ID": 1, "Product_Name": "Steeleye Stout", "English_Name": "Steeleye Stout", "Quantity_Per_Unit": "24 - 12 oz bottles", "Unit_Price": 18.0, "Units_In_Stock": 20, "Units_On_Order": 0, "Reorder_Level": 15, "Discontinued": false }, { "Product_ID": 38, "Supplier_ID": 18, "Category_ID": 1, "Product_Name": "Côte de Blaye", "English_Name": "Côte de Blaye (Red Bordeaux wine)", "Quantity_Per_Unit": "12 - 75 cl bottles", "Unit_Price": 263.5, "Units_In_Stock": 17, "Units_On_Order": 0, "Reorder_Level": 15, "Discontinued": false }, { "Product_ID": 39, "Supplier_ID": 18, "Category_ID": 1, "Product_Name": "Chartreuse verte", "English_Name": "Green Chartreuse (Liqueur)", "Quantity_Per_Unit": "750 cc per bottle", "Unit_Price": 18.0, "Units_In_Stock": 69, "Units_On_Order": 0, "Reorder_Level": 5, "Discontinued": false }, { "Product_ID": 43, "Supplier_ID": 20, "Category_ID": 1, "Product_Name": "Ipoh Coffee", "English_Name": "Malaysian Coffee", "Quantity_Per_Unit": "16 - 500 g tins", "Unit_Price": 46.0, "Units_In_Stock": 17, "Units_On_Order": 10, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 67, "Supplier_ID": 16, "Category_ID": 1, "Product_Name": "Laughing Lumberjack Lager", "English_Name": "Laughing Lumberjack Lager", "Quantity_Per_Unit": "24 - 12 oz bottles", "Unit_Price": 14.0, "Units_In_Stock": 52, "Units_On_Order": 0, "Reorder_Level": 10, "Discontinued": false }, { "Product_ID": 70, "Supplier_ID": 7, "Category_ID": 1, "Product_Name": "Outback Lager", "English_Name": "Outback Lager", "Quantity_Per_Unit": "24 - 355 ml bottles", "Unit_Price": 15.0, "Units_In_Stock": 15, "Units_On_Order": 10, "Reorder_Level": 30, "Discontinued": false }, { "Product_ID": 75, "Supplier_ID": 12, "Category_ID": 1, "Product_Name": "Rhönbräu Klosterbier", "English_Name": "Rhönbräu Beer", "Quantity_Per_Unit": "24 - 0.5 l bottles", "Unit_Price": 7.75, "Units_In_Stock": 125, "Units_On_Order": 0, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 76, "Supplier_ID": 23, "Category_ID": 1, "Product_Name": "Lakkalikööri", "English_Name": "Cloudberry Liqueur", "Quantity_Per_Unit": "500 ml", "Unit_Price": 18.0, "Units_In_Stock": 57, "Units_On_Order": 0, "Reorder_Level": 20, "Discontinued": false },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { "Product_ID": 3, "Supplier_ID": 1, "Category_ID": 2, "Product_Name": "Aniseed Syrup", "English_Name": "Licorice Syrup", "Quantity_Per_Unit": "12 - 550 ml bottles", "Unit_Price": 10.0, "Units_In_Stock": 13, "Units_On_Order": 70, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 4, "Supplier_ID": 2, "Category_ID": 2, "Product_Name": "Chef Anton's Cajun Seasoning", "English_Name": "Chef Anton's Cajun Seasoning", "Quantity_Per_Unit": "48 - 6 oz jars", "Unit_Price": 22.0, "Units_In_Stock": 53, "Units_On_Order": 0, "Reorder_Level": 0, "Discontinued": false }, { "Product_ID": 5, "Supplier_ID": 2, "Category_ID": 2, "Product_Name": "Chef Anton's Gumbo Mix", "English_Name": "Chef Anton's Gumbo Mix", "Quantity_Per_Unit": "36 boxes", "Unit_Price": 21.35, "Units_In_Stock": 0, "Units_On_Order": 0, "Reorder_Level": 0, "Discontinued": true }, { "Product_ID": 6, "Supplier_ID": 3, "Category_ID": 2, "Product_Name": "Grandma's Boysenberry Spread", "English_Name": "Grandma's Boysenberry Spread", "Quantity_Per_Unit": "12 - 8 oz jars", "Unit_Price": 25.0, "Units_In_Stock": 120, "Units_On_Order": 0, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 8, "Supplier_ID": 3, "Category_ID": 2, "Product_Name": "Northwoods Cranberry Sauce", "English_Name": "Northwoods Cranberry Sauce", "Quantity_Per_Unit": "12 - 12 oz jars", "Unit_Price": 40.0, "Units_In_Stock": 6, "Units_On_Order": 0, "Reorder_Level": 0, "Discontinued": false }, { "Product_ID": 15, "Supplier_ID": 6, "Category_ID": 2, "Product_Name": "Genen Shouyu", "English_Name": "Lite Sodium Soy Sauce", "Quantity_Per_Unit": "24 - 250 ml bottles", "Unit_Price": 15.5, "Units_In_Stock": 39, "Units_On_Order": 0, "Reorder_Level": 5, "Discontinued": false }, { "Product_ID": 44, "Supplier_ID": 20, "Category_ID": 2, "Product_Name": "Gula Malacca", "English_Name": "Malacca Dark Brown Sugar", "Quantity_Per_Unit": "20 - 2 kg bags", "Unit_Price": 19.45, "Units_In_Stock": 27, "Units_On_Order": 0, "Reorder_Level": 15, "Discontinued": false }, { "Product_ID": 61, "Supplier_ID": 29, "Category_ID": 2, "Product_Name": "Sirop d'érable", "English_Name": "Maple Syrup", "Quantity_Per_Unit": "24 - 500 ml bottles", "Unit_Price": 28.5, "Units_In_Stock": 113, "Units_On_Order": 0, "Reorder_Level": 25, "Discontinued": false }, { "Product_ID": 63, "Supplier_ID": 7, "Category_ID": 2, "Product_Name": "Vegie-spread", "English_Name": "Vegetable Sandwich Spread", "Quantity_Per_Unit": "15 - 625 g jars", "Unit_Price": 43.9, "Units_In_Stock": 24, "Units_On_Order": 0, "Reorder_Level": 5, "Discontinued": false }, { "Product_ID": 65, "Supplier_ID": 2, "Category_ID": 2, "Product_Name": "Louisiana Fiery Hot Pepper Sauce", "English_Name": "Louisiana Fiery Hot Pepper Sauce", "Quantity_Per_Unit": "32 - 8 oz bottles", "Unit_Price": 21.05, "Units_In_Stock": 76, "Units_On_Order": 0, "Reorder_Level": 0, "Discontinued": false }, { "Product_ID": 66, "Supplier_ID": 2, "Category_ID": 2, "Product_Name": "Louisiana Hot Spiced Okra", "English_Name": "Louisiana Hot Spiced Okra", "Quantity_Per_Unit": "24 - 8 oz jars", "Unit_Price": 17.0, "Units_In_Stock": 4, "Units_On_Order": 100, "Reorder_Level": 20, "Discontinued": false }, { "Product_ID": 77, "Supplier_ID": 12, "Category_ID": 2, "Product_Name": "Original Frankfurter grüne Soße", "English_Name": "Original Frankfurter Green Sauce", "Quantity_Per_Unit": "12 boxes", "Unit_Price": 13.0, "Units_In_Stock": 32, "Units_On_Order": 0, "Reorder_Level": 15, "Discontinued": false }<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ];<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function ViewModel(sessionId) {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var self = this;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.currentPositionChangedhandler = function(context) {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; self.activeProduct(self.products.currentItem());<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //ArrayDataView is a js type which implement IDataView Interface.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var productView = new wijmo.data.ArrayDataView(sourceData());//, {pageSize: 10});<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.products = productView;<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.products.currentPosition(0);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.products.currentPosition.subscribe(this.currentPositionChangedhandler, null, null);<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.activeProduct = ko.observable(this.products.currentItem());<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Filter function.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.clearFilter = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.filter(null);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.filterBeverages = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.filter({ Category_ID: 1 });<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.filterCondiments = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.filter({ Category_ID: 2 });<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Sort function.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.sortId = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.sort("Product_ID");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.sortPrice = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.sort("Unit_Price desc, Product_Name");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Paging function<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.clearPaging = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.pageSize(0);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.setPaging = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.pageSize(10);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.prevPage = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.prevPage();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.nextPage = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.nextPage();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Add function.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.add = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.add({<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Product_ID: 100,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Product_Name: "Tomato",<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Category_ID: 1,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Unit_Price: 5<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.commitEdit();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Delete function.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.deleteCurrent = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.remove();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //IDataView Edit Value in source function.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.doublePrice = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.editItem();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.currentEditItem().Unit_Price *= 2;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; productView.commitEdit();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
                &nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(document).ready(function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!viewModel) viewModel = new ViewModel();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ko.applyBindings(viewModel);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });</td>
            </tr>
        </tbody>
    </table>
</div>

<p>3. Bind to&nbsp;SpreadJS.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;div id="ss" data-bind="gcspread-sheets: { sheetCount:1,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheetIndex:0,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tabEditable:false,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newTabVisible:false,<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sheets:[<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: products, columns: [<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { displayName: 'ID', name: 'Product_ID', width:60 },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { displayName: 'Product name', name: 'Product_Name', width:260 },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { displayName: 'Category ID', name: 'Category_ID', width:100 },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { displayName: 'Price', name: 'Unit_Price', width:60 }<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }" style="width:850px; height:300px; border: 1px solid black;"&gt;&lt;/div&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<p>4. Invoke the <strong>IDataView</strong> API to refresh&nbsp;SpreadJS and display the result.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;button data-bind="click:clearPaging"&gt;pageSize = 0&lt;/button&gt;<br />
                &lt;button data-bind="click:setPaging"&gt;pageSize = 10&lt;/button&gt;<br />
                &lt;button data-bind="click:prevPage"&gt;prev&lt;/button&gt;<br />
                &lt;button data-bind="click:nextPage"&gt;next&lt;/button&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<p>For more information about binding with Wijmo, refer to&nbsp;<a href="http://wijmo.com/wiki/index.php/Data">http://wijmo.com/wiki/index.php/Data</a>.</p><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
